<script setup lang="ts">
	import { ref, watch, nextTick, onMounted, computed } from 'vue'

	const activeTab = ref('home')
	const swiperCurrent = ref(0)
	const inputValue = ref('')
	const isInputFocused = ref(false)
	const scrollViewId = ref('chat-scroll-view')
	const _showPanel = ref(false)
	const isLoading = ref(false)

	// 添加流式输出相关的状态
	const isStreaming = ref(false)
	const streamingMessageId = ref(0)

	// 定义Message接口
	interface Message {
		id : number;
		content : string;
		isUser : boolean;
		timestamp : number;
	}

	// 智谱清言API配置
	const API_URL = 'https://open.bigmodel.cn/api/paas/v4/chat/completions'
	const API_KEY = '38723d1cdd6e4f05a9031e6911004362.XEbifQ5k5NOKhfnj'

	// 聊天消息列表
	const messages = ref<Message[]>([
		{ id: 1, content: '您好，我是您的智能健康助手，有什么可以帮您？', isUser: false, timestamp: Date.now() - 120000 },
		{ id: 2, content: '我最近感觉胸口有点疼', isUser: true, timestamp: Date.now() - 60000 },
		{ id: 3, content: '请详细描述一下您的症状，包括疼痛的位置、性质和持续时间，这将帮助我更好地了解您的情况。', isUser: false, timestamp: Date.now() }
	])

	// 标签对应的swiper索引映射
	const tabIndexMap : Record<string, number> = {
		home: 0,
		chat: 1,
		service: 2,
	}

	// 根据索引获取对应标签名
	function getTabByIndex(index : number) : string {
		return Object.keys(tabIndexMap).find(key => tabIndexMap[key] === index) || 'home'
	}

	// 滚动到底部
	function scrollToBottom(forceImmediate = false) {
		// 强制立即滚动模式 - 用于流式输出
		if (forceImmediate) {
			const query = uni.createSelectorQuery().in(this);
			const chatContainer = query.select('.chat-container')
			if (chatContainer) {
				chatContainer.scrollTop = chatContainer.scrollHeight
			}
			return
		}

		// 标准滚动模式 - 用于普通操作
		nextTick(() => {
			// 使用最后一条消息的实际ID
			if (messages.value.length > 0) {
				scrollViewId.value = messages.value[messages.value.length - 1].id.toString()

				// 为确保滚动触发，添加滚动元素的直接控制
				setTimeout(() => {
					const query = uni.createSelectorQuery().in(this);
					const chatContainer = query.select('.chat-container')
					if (chatContainer) {
						chatContainer.scrollTop = chatContainer.scrollHeight
					}
				}, 100)
			}
		})
	}

	function switchTab(tab : string) : void {
		// 如果已经是当前标签页，不执行切换
		if (activeTab.value === tab) return

		// 设置当前激活的标签页和swiper索引
		activeTab.value = tab
		swiperCurrent.value = tabIndexMap[tab]

		// if (tab === 'chat') {
		//   setTimeout(() => {
		//     isInputFocused.value = true
		//     scrollToBottom()
		//   }, 400) // 等待动画完成
		// } else {
		//   isInputFocused.value = false
		// }
	}

	// 监听swiper变化
	function onSwiperChange(e : any) : void {
		const current = e.detail.current
		activeTab.value = getTabByIndex(current)

		if (activeTab.value === 'chat') {
			setTimeout(() => {
				// isInputFocused.value = true
				scrollToBottom()
			}, 300)
		} else {
			// isInputFocused.value = false
		}
	}

	// 修复类型错误
	const _isAuthenticated = ref(true)

	// 处理输入变化
	function handleInput(e : any) : void {
		inputValue.value = e.detail.value
	}
	async function callGLM4Api(userInput : string) {
		try {
			isLoading.value = true

			// 构建请求数据
			const requestData = {
				model: 'glm-4-flash-250414',
				messages: messages.value.map(msg => ({
					role: msg.isUser ? 'user' : 'assistant',
					content: msg.content
				})),
				temperature: 0.7,
				stream: true,
				userInput
			}
			const res = await new Promise((resolve, reject) => {
				uni.request({
					url: API_URL,
					method: 'POST',
					header: {
						'Content-Type': 'application/json',
						'Authorization': `Bearer ${API_KEY}`
					},
					data: requestData,
					success: (response) => {
						resolve(response);
					},
					fail: (err) => {
						reject(err);
					}
				});
			});
			if (res.statusCode < 200 || res.statusCode >= 300) {
				throw new Error(`API request failed with status ${res.statusCode}`);
			}
			const chunk = res.data;
			if (typeof chunk === 'string') {
				let fullContent = ''
				const lines = chunk.split('\n').filter(line => line.trim() !== '');
				for (const line of lines) {
					const jsonStr = line.replace(/^data: /, '');
					if (jsonStr === '[DONE]') {
						isStreaming.value = false;
						break;
					}
					try {
						const data = JSON.parse(jsonStr);
						if (data.choices && data.choices[0] && data.choices[0].delta && data.choices[0].delta.content) {
							const content = data.choices[0].delta.content;
							fullContent += content;
							const messageIndex = messages.value.findIndex(msg => msg.id === streamingMessageId.value);
							if (messageIndex !== -1) {
								messages.value[messageIndex].content = fullContent;
								messages.value[messageIndex].timestamp = Date.now();
								// 每次更新后滚动到底部，使用强制立即滚动模式
								scrollToBottom(true) // 使用true参数激活强制立即滚动
							}
						}
					} catch (e) {
						console.warn('Error parsing JSON chunk:', e);
					}
				}
				isStreaming.value = false
				return fullContent
			}
			// const response = await fetch(API_URL, {
			//   method: 'POST',
			//   headers: {
			//     'Content-Type': 'application/json',
			//     'Authorization': `Bearer ${API_KEY}`,
			//     'Origin': window.location.origin,
			//   },
			//   body: JSON.stringify(requestData),
			//   mode: 'cors',
			// })

			// if (!response.ok) {
			//   throw new Error(`API request failed with status ${response.status}`)
			// }

			// // 处理流式响应
			// if (requestData.stream) {
			//   isStreaming.value = true
			//   const reader = response.body?.getReader()
			//   if (!reader) {
			//     throw new Error('Stream reader not available')
			//   }

			//   // 创建一个TextDecoder解码器用于解析响应
			//   const decoder = new TextDecoder('utf-8')
			//   let fullContent = ''

			//   // 开始读取流
			//   while (true) {
			//     const { done, value } = await reader.read()
			//     if (done) break

			//     // 解码二进制数据
			//     const chunk = decoder.decode(value, { stream: true })

			//     try {
			//       // 流式API通常返回多个JSON对象，每行一个
			//       const lines = chunk.split('\n').filter(line => line.trim() !== '')

			//       for (const line of lines) {
			//         // 移除 "data: " 前缀
			//         const jsonStr = line.replace(/^data: /, '')

			//         // 跳过 [DONE] 信号
			//         if (jsonStr === '[DONE]') continue

			//         try {
			//           const data = JSON.parse(jsonStr)

			//           // 如果有新的内容，更新消息
			//           if (data.choices && data.choices[0] && data.choices[0].delta && data.choices[0].delta.content) {
			//             const content = data.choices[0].delta.content
			//             fullContent += content

			//             // 更新消息内容
			//             const messageIndex = messages.value.findIndex(msg => msg.id === streamingMessageId.value)
			//             if (messageIndex !== -1) {
			//               messages.value[messageIndex].content = fullContent
			//               messages.value[messageIndex].timestamp = Date.now()

			//               // 每次更新后滚动到底部，使用强制立即滚动模式
			//               scrollToBottom(true) // 使用true参数激活强制立即滚动
			//             }
			//           }
			//         } catch (e) {
			//           console.warn('Error parsing JSON chunk:', e)
			//         }
			//       }
			//     } catch (e) {
			//       console.error('Error processing chunk:', e)
			//     }
			//   }

			//   isStreaming.value = false
			//   return fullContent
			// } else {
			//   // 非流式处理
			//   const data = await response.json()
			//   return data.choices[0].message.content
			// }
		} catch (error : any) {
			console.error('Error calling GLM-4 API:', error)
			return `很抱歉，我暂时无法回应您的问题。请稍后再试。(${error.message})`
		} finally {
			isLoading.value = false
			isStreaming.value = false
		}
	}

	// 处理发送消息
	async function sendMessage() : Promise<void> {
		if (inputValue.value.trim()) {
			// 如果正在流式传输，则不发送新消息
			if (isStreaming.value) return

			// 添加用户消息
			const userMessage : Message = {
				id: messages.value.length + 1,
				content: inputValue.value,
				isUser: true,
				timestamp: Date.now()
			}
			messages.value.push(userMessage)

			// 清空输入框
			const userInput = inputValue.value
			inputValue.value = ''

			// 添加临时AI回复，显示正在输入状态
			const tempId = messages.value.length + 1
			streamingMessageId.value = tempId
			const tempMessage : Message = {
				id: tempId,
				content: '',
				isUser: false,
				timestamp: Date.now()
			}
			messages.value.push(tempMessage)
			scrollToBottom()

			// 调用智谱清言API获取回复
			const aiResponse = await callGLM4Api(userInput)

			// 如果不是流式响应，更新AI回复内容
			if (!isStreaming.value) {
				const messageIndex = messages.value.findIndex(msg => msg.id === tempId)
				if (messageIndex !== -1) {
					messages.value[messageIndex].content = aiResponse
					messages.value[messageIndex].timestamp = Date.now()
				}
			}

			// 滚动到底部
			scrollToBottom()
		}
	}

	// 格式化时间
	const formatTime = (timestamp : number) => {
		const date = new Date(timestamp)
		const hours = date.getHours().toString().padStart(2, '0')
		const minutes = date.getMinutes().toString().padStart(2, '0')
		return `${hours}:${minutes}`
	}

	// 修复Line 214: Type 'string' is not assignable to type 'boolean | undefined'
	const _getAuthStatus = computed(() => {
		return true // 替换为适当的值
	})

	// 阻止页面滑动事件
	onMounted(() => {
		// 阻止鼠标滚轮事件传播到body
		const preventWheelPropagation = (e : WheelEvent) => {
			const target = e.target as HTMLElement
			const scrollContainer = target.closest('.scroll-container')

			if (scrollContainer) {
				const isAtBottom = scrollContainer.scrollHeight - scrollContainer.scrollTop <= scrollContainer.clientHeight + 1
				const isAtTop = scrollContainer.scrollTop <= 0

				// 仅在内容滚动到底部/顶部时，且继续滚动时阻止事件
				if ((e.deltaY > 0 && isAtBottom) || (e.deltaY < 0 && isAtTop)) {
					e.preventDefault()
				}

				// 无论如何阻止事件冒泡到页面，但只针对垂直滚动
				if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
					e.stopPropagation()
				}
			}
		}

		// 阻止触摸事件在scroll容器内处理完即停止，但仅针对垂直滚动
		const preventTouchPropagation = (e : TouchEvent) => {
			if (e.touches.length === 0) return

			const target = e.target as HTMLElement
			const scrollContainer = target.closest('.scroll-container')

			if (scrollContainer) {
				// 获取触摸方向
				const touch = e.touches[0]
				const startY = touch.clientY

				// 仅当是垂直滚动时阻止冒泡
				if (e.type === 'touchmove') {
					// 允许横向滑动通过，阻止垂直滑动冒泡
					if (target.closest('.content-swiper')) {
						// 这里不阻止冒泡，让swiper可以处理横向滑动
						return
					}
				}
			}
		}

		// // 监听事件
		// document.addEventListener('wheel', preventWheelPropagation, { passive: false })
		// document.addEventListener('touchmove', preventTouchPropagation, { passive: false })
		// document.addEventListener('touchstart', preventTouchPropagation, { passive: false })

		// 组件卸载时移除事件监听
		return () => {
			// document.removeEventListener('wheel', preventWheelPropagation)
			// document.removeEventListener('touchmove', preventTouchPropagation)
			// document.removeEventListener('touchstart', preventTouchPropagation)
		}
	})
</script>

<template>
	<view class="page">
		<!-- Header section with background gradient -->
		<view class="header">
			<view class="nav">
				<text class="nav-item" :class="{ active: activeTab === 'home' }" @click="switchTab('home')">首页</text>
				<text class="nav-item" :class="{ active: activeTab === 'chat' }" @click="switchTab('chat')">对话</text>
				<text class="nav-item" :class="{ active: activeTab === 'service' }"
					@click="switchTab('service')">服务</text>
				<view class="nav-icons">
					<view class="icon-circle">
						<u-icon name="more-circle-fill" color="#333333" size="22"></u-icon>
					</view>
					<view class="icon-circle">
						<u-icon name="account-fill" color="#333333" size="24"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 使用swiper实现滑动切换 -->
		<swiper :class="activeTab === 'service'? 'content-swiper1':'content-swiper'" :current="swiperCurrent"
			@change="onSwiperChange" :duration="400" :disable-touch="false" :circular="false"
			:easing-function="'easeInOutCubic'">
			<!-- 首页内容 -->
			<swiper-item>
				<scroll-view scroll-y class="scroll-container" :bounces="false" :show-scrollbar="false">
					<view class="home-content">
						<!-- 查询历史报告区域 - 从header移到这里 -->
						<!-- Daily recommendations section -->
						<view class="doctor-title-background">
							<view class="history-query">
								<text class="query-text">查询我的历史报告</text>
								<u-icon name="arrow-rightward" color="#7f7f7f" size="16"></u-icon>
							</view>
							<image class="title-bg-image" src="/static/main.gif" mode="aspectFill"></image>
						</view>
						<view class="daily-recommendations" style="margin: 30rpx;">
							<view class="section-header">
								<u-icon name="calendar" color="#333333" size="28"></u-icon>
								<text class="section-title">每日推荐</text>
							</view>

							<view class="recommendation-card">
								<view class="food-image">
									<image
										src="https://img.freepik.com/free-photo/rice-porridge-asian-dish-congee_1205-8964.jpg"
										mode="aspectFill"></image>
								</view>
								<view class="card-content">
									<view class="card-title">胃不好的人可以喝粥吗？</view>
									<view class="card-subtitle">点击为您一键解答</view>
									<view class="card-author">安诊儿</view>
									<view class="card-tags">
										<text class="tag">健康生活</text>
										<text class="tag">科普知识</text>
									</view>
								</view>
								<view class="card-arrow">
									<u-icon name="arrow-right" color="#7f7f7f" size="16"></u-icon>
								</view>
							</view>
						</view>

						<!-- Suggestions section -->
						<view class="suggestions" style="margin: 30rpx;">
							<view class="suggestions-title">你可能感兴趣</view>
							<view class="suggestion-items">
								<view class="suggestion-item">牙结石多久洗一次？</view>
								<view class="suggestion-item">鼻炎患者的注意事项有哪些</view>
								<view class="suggestion-item">久坐会腰间盘突出吗</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>

			<!-- 对话内容 -->
			<swiper-item>
				<scroll-view scroll-y class="scroll-container chat-container" :id="scrollViewId"
					:scroll-into-view="'msg-' + scrollViewId" enhanced :show-scrollbar="false"
					:scroll-with-animation="true" :bounces="false">
					<view class="chat-content">
						<!-- 上传照片区域 -->
						<view class="upload-section">
							<view class="upload-icon">
								<u-icon name="camera-fill" color="#78a4de" size="30"></u-icon>
							</view>
							<text class="upload-text">上传照片</text>
							<text class="upload-button">去上传</text>
						</view>

						<!-- 报告查询区域 -->
						<view class="report-section">
							<view class="report-header">
								<view class="report-title">
									<u-icon name="android-fill" color="#6fccd1" size="22"></u-icon>
									<text>报告查询</text>
								</view>
								<view class="report-image">
									<image src="/static/report-card.svg" mode="aspectFit" />
								</view>
							</view>

							<view class="report-content">
								<text class="report-message">抱歉，暂未查询到6个月内的报告记录。</text>
								<text class="report-message">如您近期曾在医院进行检查，请等待医院上传报告结果后重试。</text>
							</view>
						</view>

						<!-- 查询按钮 -->
						<view class="query-button">
							<text>查询我的历史报告</text>
						</view>

						<!-- 查询结果 -->
						<view class="report-result">
							<text
								class="result-text">已为您查询到浙江近六个月的报告记录，如未找到您想要查看的报告，可以通过文字、语音告诉我医院，为您精准查询对应医院的报告信息：</text>
						</view>

						<!-- 再次显示报告查询区域 -->
						<view class="report-section">
							<view class="report-header">
								<view class="report-title">
									<u-icon name="android-fill" color="#6fccd1" size="22"></u-icon>
									<text>报告查询</text>
								</view>
								<view class="report-image">
									<image src="/static/report-card.svg" mode="aspectFit" />
								</view>
							</view>

							<view class="report-content">
								<text class="report-message">抱歉，暂未查询到6个月内的报告记录。</text>
								<text class="report-message">如您近期曾在医院进行检查，请等待医院上传报告结果后重试。</text>
							</view>
						</view>

						<!-- 操作按钮 -->
						<view class="action-buttons">
							<view class="action-button">
								<u-icon name="thumb-up-fill" color="#8fb2e5" size="18"></u-icon>
								<text>有用</text>
							</view>
							<view class="action-button">
								<u-icon name="thumb-down-fill" color="#8fb2e5" size="18"></u-icon>
								<text>没用</text>
							</view>
						</view>

						<!-- 消息列表 -->
						<view class="message-list">
							<view v-for="(message, index) in messages" :key="message.id" :id="'msg-' + message.id"
								class="message-item"
								:class="{ 'message-user': message.isUser, 'message-ai': !message.isUser }">
								<view class="message-avatar" v-if="!message.isUser">
									<image class="avatar-image" src="/static/after3.jpg" mode="aspectFill" />
								</view>
								<view class="message-avatar user-avatar" v-if="message.isUser">
									<image class="avatar-image" src="/static/head.jpg" mode="aspectFill" />
									<!-- <u-icon name="account-fill" color="#fff" size="20"></u-icon> -->
								</view>
								<view class="message-content">
									<view class="message-bubble" :class="{ 'loading': message.content === '' }">
										<text>{{ message.content }}</text>
										<view class="loading-dots" v-if="message.content === ''">
											<text class="dot"></text>
											<text class="dot"></text>
											<text class="dot"></text>
										</view>
									</view>
									<view class="message-time">{{ formatTime(message.timestamp) }}</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>

			<!-- 服务内容 -->
			<swiper-item>
				<scroll-view scroll-y class="scroll-container" :show-scrollbar="false" :bounces="false" :enhanced="true"
					:scroll-with-animation="true">
					<view class="service-content">
						<!-- 智能助手 -->
						<view class="service-section">
							<view class="section-header ai-header">
								<view class="icon-ai">AI</view>
								<text class="section-title">智能助手</text>
							</view>
							<scroll-view scroll-x class="doctors-scroll" :show-scrollbar="false" :enhanced="true"
								:scroll-with-animation="true" @touchstart.stop="() => { }" @touchmove.stop="() => { }">
								<view class="doctors-list">
									<view class="doctor-item">
										<view class="doctor-avatar-container">
											<image class="doctor-avatar" src="/static/head1.jpg" mode="aspectFill">
											</image>
											<image class="ai-badge" src="/static/ai.png" mode="aspectFill">
											</image>
											<!-- <view class="ai-badge">AI</view> -->
											<view class="doctor-name-overlay">
												<text class="doctor-name">消化内科</text>
											</view>
										</view>
									</view>
									<view class="doctor-item">
										<view class="doctor-avatar-container">
											<image class="doctor-avatar" src="/static/head2.jpg" mode="aspectFill">
											</image>
											<image class="ai-badge" src="/static/ai.png" mode="aspectFill">
											</image>
											<view class="doctor-name-overlay">
												<text class="doctor-name">神经内科</text>
											</view>
										</view>
									</view>
									<view class="doctor-item">
										<view class="doctor-avatar-container1">
											<image class="doctor-avatar" src="/static/after3.jpg" mode="aspectFill">
											</image>
											<image class="ai-badge" src="/static/ai1.png" mode="aspectFill">
											</image>
											<view class="doctor-name-overlay">
												<text class="doctor-name">内分泌科</text>
											</view>
										</view>
									</view>
									<view class="doctor-item">
										<view class="doctor-avatar-container1">
											<image class="doctor-avatar" src="/static/head6.jpg" mode="aspectFill">
											</image>
											<image class="ai-badge" src="/static/ai1.png" mode="aspectFill">
											</image>
											<view class="doctor-name-overlay">
												<text class="doctor-name">神经外科</text>
											</view>
										</view>
									</view>
									<view class="doctor-item">
										<view class="doctor-avatar-container">
											<image class="doctor-avatar" src="/static/head3.jpg" mode="aspectFill">
											</image>
											<image class="ai-badge" src="/static/ai.png" mode="aspectFill">
											</image>
											<view class="doctor-name-overlay">
												<text class="doctor-name">心胸外科</text>
											</view>
										</view>
									</view>
									<view class="doctor-item">
										<view class="doctor-avatar-container">
											<image class="doctor-avatar" src="/static/head4.jpg" mode="aspectFill">
											</image>
											<image class="ai-badge" src="/static/ai.png" mode="aspectFill">
											</image>
											<view class="doctor-name-overlay">
												<text class="doctor-name">泌尿外科</text>
											</view>
										</view>
									</view>
									<view class="doctor-item">
										<view class="doctor-avatar-container1">
											<image class="doctor-avatar" src="/static/head8.jpg" mode="aspectFill">
											</image>
											<image class="ai-badge" src="/static/ai1.png" mode="aspectFill">
											</image>
											<view class="doctor-name-overlay">
												<text class="doctor-name">儿科</text>
											</view>
										</view>
									</view>
									<view class="doctor-item">
										<view class="doctor-avatar-container">
											<image class="doctor-avatar" src="/static/head5.jpg" mode="aspectFill">
											</image>
											<image class="ai-badge" src="/static/ai.png" mode="aspectFill">
											</image>
											<view class="doctor-name-overlay">
												<text class="doctor-name">耳鼻喉科</text>
											</view>
										</view>
									</view>
									<view class="doctor-item">
										<view class="doctor-avatar-container1">
											<image class="doctor-avatar" src="/static/head9.jpg" mode="aspectFill">
											</image>
											<image class="ai-badge" src="/static/ai1.png" mode="aspectFill">
											</image>
											<view class="doctor-name-overlay">
												<text class="doctor-name">口腔科</text>
											</view>
										</view>
									</view>
									<view class="doctor-item">
										<view class="doctor-avatar-container">
											<image class="doctor-avatar" src="/static/head7.png" mode="aspectFill">
											</image>
											<image class="ai-badge" src="/static/ai1.png" mode="aspectFill">
											</image>
											<view class="doctor-name-overlay">
												<text class="doctor-name">整形外科</text>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>

						<!-- 智能服务 -->
						<view class="service-section">
							<view class="section-header ai-header">
								<view class="icon-ai square">AI</view>
								<text class="section-title">智能服务</text>
							</view>
							<view class="service-grid">
								<view class="service-item">
									<view class="service-icon purple">
										<image class="icon-text1" src="/src/static/5.png" mode="aspectFill"></image>
										<!-- <text class="icon-text">Q</text> -->
									</view>
									<text class="service-name">智能导诊</text>
								</view>
								<view class="service-item">
									<view class="service-icon blue">
										<image class="icon-text1" src="/src/static/6.png" mode="aspectFill"></image>
									</view>
									<text class="service-name">报告解读</text>
								</view>
								<view class="service-item">
									<view class="service-icon green">
										<image class="icon-text1" src="/src/static/7.png" mode="aspectFill"></image>
									</view>
									<text class="service-name">药盒识别</text>
								</view>
								<view class="service-item">
									<view class="service-icon teal">
										<image class="icon-text1" src="/src/static/8.png" mode="aspectFill"></image>
									</view>
									<text class="service-name">报告查询</text>
								</view>
							</view>
						</view>

						<!-- 常用服务 -->
						<view class="service-section">
							<view class="section-header common-header">
								<view class="icon-common">+</view>
								<text class="section-title">常用服务</text>
							</view>
							<view class="service-grid wide-grid">
								<view class="service-item">
									<view class="service-icon blue small">
										<image class="icon-text1" src="/src/static/5.png" mode="aspectFill"></image>
									</view>
									<text class="service-name">预约挂号</text>
								</view>
								<view class="service-item">
									<view class="service-icon purple small">
										<image class="icon-text1" src="/src/static/6.png" mode="aspectFill"></image>
									</view>
									<text class="service-name">在线取号</text>
								</view>
								<view class="service-item">
									<view class="service-icon green small">
										<image class="icon-text1" src="/src/static/7.png" mode="aspectFill"></image>
									</view>
									<text class="service-name">排队叫号</text>
								</view>
								<view class="service-item">
									<view class="service-icon blue small">
										<image class="icon-text1" src="/src/static/8.png" mode="aspectFill"></image>
									</view>
									<text class="service-name">扫码就医</text>
								</view>
								<view class="service-item">
									<view class="service-icon blue small">
										<image class="icon-text1" src="/src/static/9.png" mode="aspectFill"></image>
									</view>
									<text class="service-name">健康档案</text>
								</view>
								<view class="service-item">
									<view class="service-icon blue small">
										<image class="icon-text1" src="/src/static/10.png" mode="aspectFill"></image>
									</view>
									<text class="service-name">电子票据</text>
								</view>
								<view class="service-item">
									<view class="service-icon purple small">
										<image class="icon-text1" src="/src/static/11.png" mode="aspectFill"></image>
									</view>
									<text class="service-name">互联网护理</text>
								</view>
								<view class="service-item">
									<view class="service-icon purple small">
										<image class="icon-text1" src="/src/static/13.png" mode="aspectFill"></image>
									</view>
									<text class="service-name">预防接种</text>
								</view>
								<view class="service-item">
									<view class="service-icon blue small">
										<image class="icon-text1" src="/src/static/5.png" mode="aspectFill"></image>
									</view>
									<text class="service-name">电子健康卡</text>
								</view>
								<view class="service-item">
									<view class="service-icon teal small">
										<image class="icon-text1" src="/src/static/5.png" mode="aspectFill"></image>
									</view>
									<text class="service-name">健康证明</text>
								</view>
								<view class="service-item">
									<view class="service-icon blue small">
										<image class="icon-text1" src="/src/static/6.png" mode="aspectFill"></image>
									</view>
									<text class="service-name">亲情账户</text>
								</view>
								<view class="service-item">
									<view class="service-icon transparent small">
										<text class="icon-text"></text>
									</view>
									<text class="service-name transparent"></text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>

		<!-- 底部遮罩容器 -->
		<view class="bottom-container" :class="{ 'hidden': activeTab === 'service' }">
			<!-- Bottom navigation -->
			<scroll-view scroll-x class="bottom-nav-scroll" :show-scrollbar="false" :enhanced="true" :bounces="false">
				<view class="bottom-nav">
					<view class="nav-item">
						<view class="icon-bg">
							<u-icon name="heart-fill" color="#6d9eeb" size="14"></u-icon>
							<text class="nav-text">问诊</text>
						</view>
					</view>
					<view class="nav-item">
						<view class="icon-bg">
							<u-icon name="calendar" color="#6d9eeb" size="14"></u-icon>
							<text class="nav-text">预约挂号</text>
						</view>
					</view>
					<view class="nav-item">
						<view class="icon-bg">
							<u-icon name="account-fill" color="#6d9eeb" size="14"></u-icon>
							<text class="nav-text">药盒识别</text>
						</view>
					</view>
					<view class="nav-item">
						<view class="icon-bg">
							<u-icon name="account-fill" color="#6d9eeb" size="14"></u-icon>
							<text class="nav-text">报告解读</text>
						</view>
					</view>
					<!-- 添加更多导航项 -->
					<view class="nav-item">
						<view class="icon-bg">
							<u-icon name="account-fill" color="#6d9eeb" size="14"></u-icon>
							<text class="nav-text">医院导航</text>
						</view>
					</view>
					<view class="nav-item">
						<view class="icon-bg">
							<u-icon name="account-fill" color="#6d9eeb" size="14"></u-icon>
							<text class="nav-text">专家推荐</text>
						</view>
					</view>
					<view class="nav-item">
						<view class="icon-bg">
							<u-icon name="account-fill" color="#6d9eeb" size="14"></u-icon>
							<text class="nav-text">用药提醒</text>
						</view>
					</view>
					<view class="nav-item">
						<view class="icon-bg">
							<u-icon name="account-fill" color="#6d9eeb" size="14"></u-icon>
							<text class="nav-text">健康档案</text>
						</view>
					</view>
				</view>
			</scroll-view>

			<!-- Input box -->
			<view class="input-box">
				<view class="input-left">
					<u-icon name="mic" color="#9aa0a6" size="22"></u-icon>
					<!-- <Icon icon="mdi:microphone" width="22" height="22" color="#9aa0a6" /> -->
				</view>
				<view class="input-center">
					<input class="text-input" type="text" :value="inputValue" @input="handleInput"
						:focus="isInputFocused && activeTab === 'chat'" placeholder="有什么健康问题需要问我吗~" confirm-type="send"
						@confirm="sendMessage" />
				</view>
				<view class="input-right" @click="sendMessage">
					<u-icon :name="inputValue ? 'play-right-fill' : 'camera-fill'"
						:color="inputValue ? '#4285f4' : '#9aa0a6'" size="22"></u-icon>
				</view>
			</view>

			<!-- 底部安全区域留白 -->
			<view class="safe-area-bottom"></view>
		</view>
	</view>
</template>

<style lang="scss">
	/* Add global styles to prevent body scrolling */
	::v-deep html,
	::v-deep body {
		overflow: hidden;
		position: fixed;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		touch-action: manipulation;
		/* 允许基本的手势操作，但由开发者自定义处理 */
	}

	/* 全局过渡效果 */
	// * {
	//   transition: background-color 0.1s ease, transform 0.1s ease, opacity 0.1s ease;
	// }

	.page {
		min-height: 100vh;
		background-color: #eff7ff;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
		position: relative;
		padding-bottom: 0;
		/* 移除底部padding，由底部容器负责留白 */
		padding-top: calc(130rpx + env(safe-area-inset-top, 10px));
		overflow: hidden;
		/* 防止整个页面滚动 */
		touch-action: manipulation;
		/* 允许基本的手势操作，但由开发者自定义处理 */
	}

	// 滑动组件样式
	.content-swiper {
		width: 100%;
		height: calc(100vh - 150px - env(safe-area-inset-top, 10px));
		/* Remove the additional bottom subtraction to extend to the full screen height */
		overflow: hidden;
		/* 防止swiper本身出现滚动条 */
		touch-action: pan-x;
		/* 允许横向滑动 */
	}

	.content-swiper1 {
		width: 100%;
		height: 100vh;
		/* Remove the additional bottom subtraction to extend to the full screen height */
		overflow: hidden;
		/* 防止swiper本身出现滚动条 */
		touch-action: pan-x;
		/* 允许横向滑动 */
	}

	.scroll-container {
		height: 100%;
		padding-bottom: 134px;
		overflow-y: auto;
		/* 确保滚动仅在此组件内 */
		-webkit-overflow-scrolling: touch;
		/* 增强iOS滚动体验 */
		overscroll-behavior: contain;
		/* 防止滚动传播到父元素 */
		touch-action: pan-y;
		/* 只允许垂直滑动，禁止水平滑动和缩放 */
		position: relative;
		z-index: 1;
		/* 确保滚动容器在更高的层级 */
		max-width: 100%;
		scroll-behavior: smooth;
		/* 平滑滚动 */
	}

	.chat-container {
		overflow-y: auto;
		/* 允许聊天区域单独滚动 */
		-webkit-overflow-scrolling: touch;
		/* 增强iOS滚动体验 */
		overscroll-behavior: contain;
		/* 防止滚动传播到父元素 */
		touch-action: pan-y;
		/* 只允许垂直滑动，禁止水平滑动和缩放 */
	}

	// 底部容器样式
	.bottom-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #eff7ff;
		z-index: 99;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		padding-top: 15px;
		animation: fadeIn 0.3s ease forwards;
		will-change: opacity, transform;

		&.hidden {
			animation: fadeOut 0.3s ease forwards;
			pointer-events: none;
		}
	}

	// 底部安全区域
	.safe-area-bottom {
		height: env(safe-area-inset-bottom, 10px);
		width: 100%;
	}

	// Header section
	.header {
		background: linear-gradient(135deg, #e0edff 0%, #d9f0ff 100%);
		padding: 30px 30rpx 0rpx 30rpx;
		// border-bottom-left-radius: 30px;
		// border-bottom-right-radius: 30px;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		padding-top: calc(30px + env(safe-area-inset-top, 10px));
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
		transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

		.nav {
			display: flex;
			align-items: center;
			margin-bottom: 25rpx;

			.nav-item {
				font-size: 18px;
				margin-right: 20px;
				color: #333;
				font-weight: 500;
				transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
				position: relative;

				&:after {
					content: '';
					position: absolute;
					bottom: -4px;
					left: 0;
					width: 0;
					height: 2px;
					background-color: #4285f4;
					transition: width 0.3s ease;
				}

				&.active {
					font-weight: bold;
					font-size: 20px;
					color: #4285f4;

					&:after {
						width: 100%;
					}
				}

				&:not(.active):hover {
					transform: translateY(-2px);
					color: #6d9eeb;
				}

				&.nav-click-effect {
					transform: scale(0.95);
					opacity: 0.8;
					transition: all 0.15s ease-out;

					&:after {
						width: 100%;
						transition: width 0.15s ease-out;
					}
				}
			}

			.nav-icons {
				display: flex;
				margin-left: auto;

				.icon-circle {
					width: 36px;
					height: 36px;
					background-color: #fff;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 12px;
					transition: all 0.3s ease;
					box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

					&:hover {
						transform: scale(1.1);
						box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
					}
				}
			}
		}
	}

	// 主页内容相关样式
	.home-content {
		padding-bottom: 134px;
		background-color: #eff7ff;

		// 历史查询区域
		.history-query {
			position: absolute;
			border-radius: 25px;
			display: flex;
			align-items: center;
			padding: 6px 14px;
			z-index: 99;
			width: 50%;
			max-width: 200px;
			left: 50%;
			bottom: 10px;
			transform: translateX(-50%);
			background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)) padding-box,
				conic-gradient(from 90deg, #61e8f3, #a07af8, white, #a2d8fd, #e7c6ff, #61e8f3) border-box;
			border: 1.5px solid transparent;
			box-shadow: 0 4px 12px rgba(105, 149, 236, 0.2);
			backdrop-filter: blur(5px);

			.query-icon {
				width: 16px;
				height: 16px;
				background-color: #61c7ff;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 8px;
				flex-shrink: 0;

				.avatar-circle {
					width: 100%;
					height: 100%;
					object-fit: cover;
					border-radius: 50%;
				}
			}

			.query-text {
				font-size: 13px;
				color: #373777;
				font-weight: 500;
				flex: 1;
			}
		}

		// Daily recommendations section
		.daily-recommendations {
			background-color: #f3eaff;
			// margin: 10px;
			padding: 15px;
			border-radius: 20px;
			// width: 90%;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 10px;

			.section-header {
				display: flex;
				align-items: center;
				margin-bottom: 15px;

				.section-title {
					font-size: 18px;
					font-weight: bold;
					color: #333;
					margin-left: 8px;
				}
			}

			.recommendation-card {
				background-color: #fff;
				border-radius: 15px;
				display: flex;
				align-items: stretch;
				padding: 12px;
				position: relative;
				overflow: hidden;

				.food-image {
					width: 70px;
					height: 70px;
					border-radius: 10px;
					overflow: hidden;
					flex-shrink: 0;
					align-self: flex-start;

					image {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

				.card-content {
					flex: 1;
					padding: 0 8px 0 12px;
					min-width: 0;
					/* Important for text truncation */
					max-width: calc(100% - 110px);
					/* Account for image and arrow */
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 70px;
					/* Match image height */

					.card-title {
						font-size: 15px;
						font-weight: bold;
						color: #1a2a63;
						margin-bottom: 3px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						line-height: 1.2;
					}

					.card-subtitle {
						font-size: 12px;
						color: #788292;
						margin-bottom: 4px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						line-height: 1.2;
					}

					.card-author {
						font-size: 12px;
						font-weight: 500;
						color: #616c82;
						margin-bottom: 4px;
						line-height: 1.2;
					}

					.card-tags {
						display: flex;
						flex-wrap: nowrap;
						overflow: hidden;
						margin-top: auto;
						/* Push to bottom */

						.tag {
							font-size: 10px;
							color: #929eb3;
							background-color: #f2f3f9;
							padding: 1px 6px;
							border-radius: 10px;
							margin-right: 6px;
							white-space: nowrap;
							line-height: 1.5;
						}
					}
				}

				.card-arrow {
					width: 24px;
					height: 24px;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					right: 10px;
					top: 50%;
					transform: translateY(-50%);
					flex-shrink: 0;
				}
			}
		}

		// Suggestions section
		.suggestions {
			margin-bottom: 20px;

			.suggestions-title {
				font-size: 16px;
				font-weight: 500;
				color: #333;
				margin-bottom: 12px;
			}

			.suggestion-items {
				display: flex;
				flex-direction: column;
				gap: 10px;

				.suggestion-item {
					background-color: #fff;
					border-radius: 30px;
					padding: 12px 20px;
					font-size: 15px;
					color: #333;
				}
			}
		}
	}

	// 对话内容相关样式
	.chat-content {
		padding: 20px;
		padding-bottom: 134px;

		// 上传照片区域
		.upload-section {
			background-color: #fff;
			border-radius: 15px;
			margin-bottom: 20px;
			padding: 15px;
			display: flex;
			align-items: center;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

			.upload-icon {
				margin-right: 12px;
			}

			.upload-text {
				font-size: 16px;
				color: #333;
				flex: 1;
			}

			.upload-button {
				background-color: #f2f7ff;
				color: #4285f4;
				font-size: 14px;
				padding: 6px 12px;
				border-radius: 16px;
				font-weight: 500;
			}
		}

		// 报告查询区域
		.report-section {
			background-color: #fff;
			border-radius: 15px;
			margin-bottom: 20px;
			overflow: hidden;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

			.report-header {
				display: flex;
				padding: 15px;
				background-color: #f9fbff;
				position: relative;

				.report-title {
					display: flex;
					align-items: center;
					font-size: 16px;
					font-weight: 500;
					color: #333;

					text {
						margin-left: 8px;
					}
				}

				.report-image {
					position: absolute;
					right: 15px;
					top: 0;
					width: 60px;
					height: 60px;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.report-content {
				padding: 15px;

				.report-message {
					display: block;
					font-size: 15px;
					color: #333;
					line-height: 1.6;
					margin-bottom: 10px;

					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}

		// 查询按钮
		.query-button {
			background-color: #2196f3;
			color: #fff;
			font-size: 16px;
			text-align: center;
			padding: 12px 20px;
			border-radius: 30px;
			margin: 20px 0;
			font-weight: 500;
			transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		}

		// 查询结果
		.report-result {
			background-color: #f0f7ff;
			border-radius: 15px;
			padding: 15px;
			margin-bottom: 20px;

			.result-text {
				font-size: 15px;
				color: #333;
				line-height: 1.6;
			}
		}

		// 操作按钮
		.action-buttons {
			display: flex;
			justify-content: flex-end;
			margin-bottom: 20px;

			.action-button {
				display: flex;
				align-items: center;
				margin-left: 20px;

				text {
					font-size: 14px;
					color: #666;
					margin-left: 5px;
				}
			}
		}

		// 消息列表
		.message-list {
			margin-bottom: 50px;

			.message-item {
				display: flex;
				margin-bottom: 20px;
				align-items: flex-start;

				&.message-user {
					flex-direction: row-reverse;
				}

				.message-avatar {
					width: 36px;
					height: 36px;
					border-radius: 50%;
					background-color: #e9f0ff;
					overflow: hidden;
					flex-shrink: 0;

					&.user-avatar {
						background-color: #4285f4;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.avatar-image {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

				.message-content {
					max-width: 70%;
					margin: 0 10px;

					.message-bubble {
						padding: 12px 16px;
						border-radius: 18px;
						font-size: 15px;
						line-height: 1.4;
						word-break: break-word;
						background-color: #fff;
						color: #333;
						box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

						&.loading {
							background-color: #f0f7ff;
						}

						.loading-dots {
							display: flex;
							margin-top: 8px;
							justify-content: center;
							gap: 4px;

							.dot {
								width: 8px;
								height: 8px;
								border-radius: 50%;
								background-color: #4285f4;
								display: inline-block;
								opacity: 0.7;
								animation: dot-pulse 1.2s infinite ease-in-out;

								&:nth-child(1) {
									animation-delay: 0s;
								}

								&:nth-child(2) {
									animation-delay: 0.2s;
								}

								&:nth-child(3) {
									animation-delay: 0.4s;
								}
							}
						}
					}

					.message-time {
						font-size: 12px;
						color: #999;
						margin-top: 5px;
						display: flex;
					}
				}

				&.message-user .message-content {
					.message-bubble {
						background-color: #dcedff;
						color: #2c3e50;
					}

					.message-time {
						justify-content: flex-end;
					}
				}
			}
		}
	}

	// 服务内容相关样式
	.service-content {
		padding: 40rpx 40rpx 0 40rpx;
		// padding-bottom: 134px;
		/* 为服务页面添加足够的底部边距，防止内容被遮挡 */
		touch-action: pan-y;
		/* Allow vertical scrolling */
		position: relative;
		z-index: 1;

		// 服务区域通用样式
		.service-section {
			background-color: #fff;
			border-radius: 15px;
			margin-bottom: 30rpx;
			padding: 15px;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

			.section-header {
				display: flex;
				align-items: center;
				margin-bottom: 15px;

				.section-title {
					font-size: 16px;
					font-weight: bold;
					color: #333;
					margin-left: 8px;
				}

				&.ai-header {
					.icon-ai {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 28px;
						height: 28px;
						background-color: transparent;
						color: #4285f4;
						font-size: 14px;
						font-weight: bold;
						border-radius: 8px;

						&.square {
							background-color: transparent;
							color: #5c6bc0;
						}
					}
				}

				&.common-header {
					.icon-common {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 28px;
						height: 28px;
						background-color: transparent;
						color: #4c84ff;
						font-size: 14px;
						font-weight: bold;
					}
				}
			}
		}

		// 医生列表样式
		.doctors-scroll {
			overflow-x: auto;
			white-space: nowrap;
			width: 100%;
			-webkit-overflow-scrolling: touch;
			scrollbar-width: none;
			/* Firefox */
			-ms-overflow-style: none;
			/* IE and Edge */
			margin: 0 -5px;
			padding: 0 5px;
			touch-action: pan-x;
			/* Only allow horizontal swiping */

			/* Hide scrollbar for Chrome, Safari and Opera */
			&::-webkit-scrollbar {
				display: none;
			}
		}

		.doctors-list {
			display: flex;
			justify-content: flex-start;
			flex-wrap: nowrap;
			padding: 5px 0;
			width: auto;
			overflow: visible;

			.doctor-item {
				flex: 0 0 auto;
				width: 25%;
				text-align: center;
				margin-right: 10px;
				min-width: 80px;

				.doctor-avatar-container {
					position: relative;
					width: 160rpx;
					height: 160rpx;
					margin-right: 20rpx;
					border-radius: 5px;
					overflow: hidden;
					background: linear-gradient(135deg, #7593ff 0%, #ecf0f3 100%);
					// margin-bottom: 8px;
					// box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

					&:nth-of-type(2) {
						background: linear-gradient(135deg, #efe7fd 0%, #e4d7ff 100%);
					}

					&:nth-of-type(3) {
						background: linear-gradient(135deg, #e4faed 0%, #d4f5e9 100%);
					}

					&:nth-of-type(4) {
						background: linear-gradient(135deg, #fff1e6 0%, #ffe7d9 100%);
					}

					.doctor-avatar {
						border: 2rpx solid #fff;
						width: 95rpx;
						height: 95rpx;
						margin-top: 10rpx;
						border-radius: 50%;
					}

					.ai-badge {
						width: 36rpx;
						height: 36rpx;
						position: absolute;
						top: 2px;
						right: 0px;
						// background-color: #4285f4;
						color: white;
						border-radius: 4px;
						font-size: 10px;
						padding: 2px 4px;
						font-weight: bold;
					}

					.doctor-name-overlay {
						position: absolute;
						left: 0;
						right: 0;
						bottom: 6rpx;
						padding: 5rpx 0;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.doctor-name {
						color: #333333;
						font-size: 24rpx;
						text-align: center;
						// text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
					}
				}


				.doctor-avatar-container1 {
					position: relative;
					width: 160rpx;
					height: 160rpx;
					margin-right: 20rpx;
					border-radius: 5px;
					overflow: hidden;
					background: linear-gradient(135deg, #e4a5ff 0%, #ecf0f3 100%);
					// margin-bottom: 8px;
					// box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

					&:nth-of-type(2) {
						background: linear-gradient(135deg, #e4faed 0%, #ecf0f3 100%);
					}

					&:nth-of-type(3) {
						background: linear-gradient(135deg, #e4faed 0%, #d4f5e9 100%);
					}

					&:nth-of-type(4) {
						background: linear-gradient(135deg, #fff1e6 0%, #ffe7d9 100%);
					}

					.doctor-avatar {
						border: 2rpx solid #fff;
						width: 95rpx;
						height: 95rpx;
						margin-top: 10rpx;
						border-radius: 50%;
					}

					.ai-badge {
						width: 36rpx;
						height: 36rpx;
						top: 2px;
						right: 0px;
						position: absolute;
						// background-color: #4285f4;
						color: white;
						border-radius: 4px;
						font-size: 10px;
						padding: 2px 4px;
						font-weight: bold;
					}

					.doctor-name-overlay {
						position: absolute;
						left: 0;
						right: 0;
						bottom: 6rpx;
						padding: 5rpx 0;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.doctor-name {
						color: #333333;
						font-size: 24rpx;
						text-align: center;
						// text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
					}
				}

				.doctor-name {
					font-size: 14px;
					color: #333;
					display: block;
					margin-top: 5px;
				}
			}
		}

		// 服务网格样式
		.service-grid {
			display: flex;
			flex-wrap: wrap;

			&.wide-grid {
				margin: 0 -5px;
			}

			.service-item {
				width: 25%;
				text-align: center;
				margin-bottom: 20rpx;

				.service-icon {
					width: 50px;
					height: 50px;
					margin: 0 auto 8px;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #5c6bc0;
					font-size: 24px;
					position: relative;
					background-color: transparent;
					border-radius: 0;

					&.purple {
						color: #9575cd;
					}

					&.blue {
						color: #42a5f5;
					}

					&.green {
						color: #26c6da;
					}

					&.teal {
						color: #00bcd4;
					}

					&.small {
						width: 40px;
						height: 40px;
						font-size: 18px;
					}

					&.transparent {
						color: transparent;
					}

					.icon-text {
						line-height: 1;
						z-index: 1;
					}

					.icon-text1 {
						width: 50rpx;
						height: 50rpx;
					}
				}

				.service-name {
					font-size: 14px;
					color: #333;
					display: block;
					margin-top: 5px;

					&.transparent {
						color: transparent;
					}
				}
			}
		}
	}

	// 添加底部导航滚动容器样式
	.bottom-nav-scroll {
		width: 94%;
		white-space: nowrap;
		padding: 0 15px;
		margin-bottom: 10px;
		position: relative;

		// 添加两侧渐变提示，指示可滚动
		&:before,
		&:after {
			content: '';
			position: absolute;
			top: 0;
			bottom: 0;
			width: 30px;
			z-index: 2;
			pointer-events: none;
		}

		&:before {
			left: 0;
			background: linear-gradient(to right, rgba(245, 247, 250, 1) 0%, rgba(245, 247, 250, 0) 100%);
		}

		&:after {
			right: 0;
			background: linear-gradient(to left, rgba(245, 247, 250, 1) 0%, rgba(245, 247, 250, 0) 100%);
		}
	}

	// Bottom navigation
	.bottom-nav {
		position: relative;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		column-gap: 15px;
		padding: 5px 0;
		z-index: 10;
		min-width: min-content;
		/* 确保内容不会被压缩 */

		.nav-item {
			display: flex;
			align-items: center;
			transition: all 0.3s ease;
			flex: 0 0 auto;

			&:hover {
				transform: translateY(-2px);
			}

			.icon-bg {
				background-color: #fff;
				border-radius: 14px;
				height: 26px;
				display: flex;
				align-items: center;
				padding: 0 8px;
				box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
				transition: all 0.3s ease;
				white-space: nowrap;

				&:hover {
					box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
					background-color: #f0f7ff;
				}

				&:active {
					transform: scale(0.95);
				}
			}

			// 为不同的服务图标添加不同的悬停背景色
			&:nth-child(1) .icon-bg:hover {
				background-color: #edf3fe;
			}

			&:nth-child(2) .icon-bg:hover {
				background-color: #eaf5ff;
			}

			&:nth-child(3) .icon-bg:hover {
				background-color: #e5f6fd;
			}

			&:nth-child(4) .icon-bg:hover {
				background-color: #e2f3fa;
			}

			&:nth-child(5) .icon-bg:hover {
				background-color: #eff0fa;
			}

			&:nth-child(6) .icon-bg:hover {
				background-color: #ebf9f7;
			}

			&:nth-child(7) .icon-bg:hover {
				background-color: #edeffa;
			}

			&:nth-child(8) .icon-bg:hover {
				background-color: #f2eefb;
			}

			.nav-text {
				font-size: 11px;
				color: #666;
				margin-left: 4px;
			}
		}
	}

	// Input box
	.input-box {
		position: relative;
		/* 改为相对定位，由底部容器控制位置 */
		bottom: 0;
		margin: 0 auto 20px;
		width: calc(100% - 60px);
		/* 增加两侧边距，使输入框更窄 */
		max-width: 500px;
		/* 减小最大宽度 */
		background-color: #fff;
		border-radius: 40px;
		display: flex;
		align-items: center;
		padding: 8px 15px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

		&:focus-within {
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
			transform: translateY(-2px);
		}

		.input-left,
		.input-right {
			width: 32px;
			/* 减小图标容器宽度 */
			height: 32px;
			/* 减小图标容器高度 */
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;
		}

		.input-right {
			cursor: pointer;

			&:hover {
				transform: scale(1.1);
			}

			&:active {
				transform: scale(0.95);
			}
		}

		.input-center {
			flex: 1;
			padding: 0 8px;
			/* 减小内边距 */

			.text-input {
				width: 100%;
				height: 32px;
				font-size: 14px;
				color: #333;
				background: transparent;
				border: none;
				outline: none;
				transition: all 0.2s ease;
			}

			.input-placeholder {
				font-size: 14px;
				color: #999;
			}
		}
	}

	// 以下为内容卡片的过渡效果
	.service-item,
	.upload-section,
	.report-section,
	.report-result {
		transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
		transform-origin: center;

		// &:hover {
		//   transform: translateY(-2px);
		//   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
		// }
	}

	.query-button {
		transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

		// &:hover {
		//   transform: translateY(-2px) scale(1.02);
		//   box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
		// }

		&:active {
			transform: scale(0.98);
		}
	}

	// 定义一个滑入动画
	@keyframes slideUp {
		from {
			transform: translateY(20px);
			opacity: 0;
		}

		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	// 动画应用到卡片和列表项
	.suggestion-item,
	.service-item,
	.doctor-item {
		animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
		animation-delay: calc(var(--anim-order, 0) * 0.05s);
	}

	// 添加动画
	@keyframes dot-pulse {

		0%,
		80%,
		100% {
			transform: scale(0.6);
			opacity: 0.4;
		}

		40% {
			transform: scale(1);
			opacity: 1;
		}
	}

	.doctor-title-background {
		width: 100%;
		height: 370rpx;
		display: flex;
		justify-content: center;
		position: relative;
		background-image: url(/static/logo-bag.jpg);
		background-size: 100% 100%;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.title-bg-image {
		width: 150px;
		height: 150px;
		margin-top: 36rpx;
		object-fit: cover;
	}

	// 添加淡入淡出动画
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(20px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes fadeOut {
		from {
			opacity: 1;
			transform: translateY(0);
		}

		to {
			opacity: 0;
			transform: translateY(20px);
		}
	}
</style>